<template>
    <dv-full-screen-container>
        <div class="screen-container">
            <!-- 顶部标题 -->
            <div class="topbar" @click="alert('点击了顶部标题')">
                <!-- <div class="title">E打电中国区总数据</div> -->
                <dv-decoration-7 class="title" style="width:60%;height:60px;">E打电中国区总数据</dv-decoration-7>
            </div>

            <!-- 主体区域 -->
            <div class="main">
                <!-- 左侧区域 -->
                <div class="left">
                    <dv-border-box-10 class="block">
                        <site-overview :siteOverviewData="siteOverviewData" />
                    </dv-border-box-10>
                    <dv-border-box-10 class="block">
                        <car-overview :carOverviewData="carOverviewData" />
                    </dv-border-box-10>
                    <dv-border-box-10 class="block">
                        <operator-overview :operatorOverviewData="operatorOverviewData" />
                    </dv-border-box-10>
                    <dv-border-box-10 class="block">
                        <topup-overview :topupOverviewData="topupOverviewData" />
                    </dv-border-box-10>

                </div>

                <!-- 中间区域 -->
                <div class="middle">
                    <dv-border-box-11 title="今日站点充电量排行" class="block ">
                        <charge-rank />
                    </dv-border-box-11>
                    <dv-border-box-11 title="今日站点充电金额排行" class="block ">
                        <money-rank />
                    </dv-border-box-11>
                    <dv-border-box-11 title="近30天充电态势" class="block ">
                        <trend-rank />
                    </dv-border-box-11>
                </div>

                <!-- 右侧区域 -->
                <div class="right">
                    <dv-border-box-10 class="block">
                        <data-source />
                    </dv-border-box-10>
                    <dv-border-box-10 class="block">
                        <member-info />
                    </dv-border-box-10>
                    <dv-border-box-10 class="block">
                        <order-list />
                    </dv-border-box-10>
                </div>
            </div>
        </div>
    </dv-full-screen-container>
</template>

<script>
import SiteOverview from './components/siteOverview.vue'
import CarOverview from './components/carOverview.vue'
import OperatorOverview from './components/operatorOverview.vue'
import TopupOverview from './components/topupOverview.vue'
import ChargeRank from './components/chargeRank.vue'
import MoneyRank from './components/moneyrank.vue'
import TrendRank from './components/trendRank.vue'
import DataSource from './components/dataSource.vue'
import MemberInfo from './components/memberInfo.vue'
import OrderList from './components/orderList.vue'

export default {
    name: 'Main',
    components: {
        SiteOverview,
        CarOverview,
        OperatorOverview,
        TopupOverview,
        ChargeRank,
        MoneyRank,
        TrendRank,
        DataSource,
        MemberInfo,
        OrderList
    },
    data() {
        return {
            // 左边的数据
            siteOverviewData: {
                total: 61,
                active: 32,
                inactive: 2999
            },
            carOverviewData: {
                total: 7208,
                active: 226,
                working: 446,
            },
            operatorOverviewData: {
                province: 61,
                city: 32,
                county: 29
            },
            topupOverviewData: {
                today: 1,
                yesterday: 1,
                total: 100000
            }
            // 中间的数据
        }
    },
}
</script>

<style scoped lang="scss">
.screen-container {
    width: 100%;
    height: 100%;
    background-color: #0f1325;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'DIN', 'Roboto Mono', monospace;

    .topbar {
        display: flex;
        justify-content: center;
        align-items: center;

        .title {
            cursor: pointer;
            text-align: center;
            font-size: 40px;
            color: #36c4ff;
            font-weight: bolder;
        }
    }

    .main {
        flex: 1;
        display: flex;
        gap: 10px;

        .left,
        .middle,
        .right {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .left,
        .right {
            width: 25%;
        }

        .middle {
            width: 50%;
        }

        .block {
            flex: 1;
            padding: 10px;
        }
    }
}
</style>
